<script setup lang="ts">
import { useSlots } from "vue";

const props = withDefaults(defineProps<{ border?: boolean }>(), {
  border: false,
});

const slots = useSlots();

defineOptions({
  name: "Segment",
});
</script>

<template>
  <div :class="['w-full  rounded', props.border && 'border dark:border-[#363637]']">
    <div
      class="flex text-lg font-bold text-neutral-700 dark:border-[#363637] border-b before:bg-blue-500 before:w-[4px] before:mr-1 p-2"
    >
      <slot name="header" />
    </div>
    <div class="p-4">
      <slot />
    </div>
    <div v-if="slots.footer" class="flex border-t dark:border-[#363637] p-2">
      <slot name="footer" />
    </div>
  </div>
</template>
